<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 外部样式表，需要引入css文件 -->
    <link rel="stylesheet" href="./css/03.css">


    <!-- 内部样式表 -->
    <style>
        /* 内部样式表 */
        p { 
            color: rgb(0, 162, 255);
            font-size: 19px;

            /* 400正常，700加粗 */
            font-weight: 400;

            /* italic倾斜，nomal正常 */
            font-style: italic;
            /* 行高，数字是当前字体大小倍数 行高是文本高度 + 文本上间距+文本下间距*/
            line-height: 23px;
        }

        .div1 {
            color: red;
            /* font-size: 40px; */
        }
        .size {
            font-size: 15;
        }

        /* id 选择器 */
        #blue {
            color: rgb(255, 0, 238);
        }

        .red {
            background-color: red;
            width: 400px;
            height: 350px;
        }
        .blue {
            background-color: rgb(47, 0, 255);
            width: 200px;
            height: 160px;
        }
        .div2 {
            background-color: rgb(0, 204, 255);
            width: 200px;
            height: 40px;
            /* 单行文字居中，行高等于div的高度即可 */
            line-height: 40px;
        }

        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <p>体验css</p>
    <p>体验2css</p>
    <hr>
    <p>类 选择器标签-》.类名 <br>
        使用类选择器-》标签添加 class="类名"
    </p>
    <!-- 行内样式表，配合js使用 -->
    <div class="box" style="color: bisque; font-size: 20;">
        <h3>我是div标签</h3>

    </div>
    <!-- 一个标签可以用多个类名，中间空格隔开，多个单词-连接 -->
    <div class="div1 size">一个标签可以用多个类名，中间空格隔开，多个单词-连接</div>

    <h4 class="div1">我是h4，使用div1的class</h4>
    <hr>
    <p>id 选择器，一般配合JavaScript使用，很少用来设置CSS样式</p>
    <p>步骤，定义id选择器-》 #id名</p>
    <p id="blue">使用id选择器-》标签添加id="id名"</p>
    <div id="blue">同一个id选择器在一个页面只能使用一次</div>
    <hr>
    <p>* 通配符选择器，找所有标签。清除标签样式</p>
    <hr>
    <div class="red">第一个盒子div独占一行</div>
    <div class="blue">第二个盒子</div>
<hr>
    <div class="div2">文字上下居中</div>

    <p>text-indent文本缩进，中文缩进2个字，使用em单位</p>
    <p style="text-indent: 2em; color: rgb(12, 239, 239);">我是段落，我是段落，我是段落，我是段落，我是段落，我是段落，我是段落，我是段落，我是段落，我是段落，我是段落，我是段落，我是段落，我是段落，我是段落，我是段落，我是段落，我是段落，我是段落，我是段落，我是段落，我是段落，我是段落，我是段落，我是段落，我是段落，我是段落</p>
    <p>文本对其方式，text-alingn</p>
    <p style="text-align: center;">我要在文本中间，有木有效果</p>

    <div style="text-align: center;">
        <img src="./images/1.gif" alt="">
    </div>
    <hr>
    <p>文本修饰线 text-decoration</p>
    <p style="text-decoration: underline;">我是一句话，"text-decoration: underline;单独设置是否有下划线</p>
    <p style="text-decoration: overline;">我是一句话，text-decoration: overline;单独设置是否有划线</p>
    <p style="text-decoration: line-through;">我是一句话，text-decoration: line-through;单独设置是否有删除线</p>

    <a href="http://www.baidu.com" target="_blank" >百度</a>
</body>
</html>